<template>
  <div class="MyData">
    <section class="part1_wrap">
      <el-col :span="15" class="leftPart">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>使用数据</span>
            <el-col :span="20" class="leftTop">
              <el-form class="selChoose" size="mini">
                <el-form-item>
                  <el-date-picker
                    size="mini"
                    v-model="TrendTimeInterval"
                    type="datetimerange"
                    align="right"
                    start-placeholder="开始日期"
                    range-separator="至"
                    end-placeholder="结束日期"
                    @change="myDataEchart"
                    :default-time="['00:00:00', '23:59:59']"
                    value-format="yyyy-MM-dd"
                    format="yyyy-MM-dd"
                  ></el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
          </div>
          <div class="text item">
            <LineTem v-bind:id="'myDataLine'" v-bind:data="myDataOption"></LineTem>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8" class="rightPart">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>设备排行</span>
            <el-col :span="16" class="rightTop">
              <el-form class="selChoose" size="mini">
                <el-form-item>
                  <el-date-picker size="mini" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
          </div>
          <div class="text item">
            <ul>
              <template v-for="item in percentageData">
                <li>
                  <span class="title">{{item.name}}</span>
                  <span>
                    <el-progress :percentage="item.percentage" :color="customColorMethod"></el-progress>
                  </span>
                </li>
              </template>
            </ul>
          </div>
        </el-card>
      </el-col>
    </section>
    <section class="part2_wrap">
      <el-col :span="15" class="leftPart">
        <el-col :span="8">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>异常类型</span>
            </div>
            <div class="text item">
              <Pie v-bind:id="'dtuPie2'" v-bind:data="exceptionOption"></Pie>
              <div class="content">
                <div class="content_wrap">
                  <span>
                    <div class="blueIcon"></div>
                    <span class="title">AiBox</span>
                  </span>
                  <span>电线松动或者电压不稳定(56%)</span>
                </div>
                <div class="content_wrap">
                  <span>
                    <div class="pupleIcon"></div>
                    <span class="title">无法存储</span>
                  </span>
                  <span>电线松动或者电压不稳定(28%)</span>
                </div>
                <div class="content_wrap">
                  <span>
                    <div class="greenIcon"></div>
                    <span class="title">没有声音</span>
                  </span>
                  <span>电线松动或者电压不稳定(16%)</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>内存占用</span>
            </div>
            <div class="text item">
              <ul>
                <template v-for="item in statusData">
                  <li>
                    <el-progress
                      :text-inside="true"
                      :stroke-width="item.percentage"
                      :percentage="item.percentage"
                      :color="customColorMethod"
                    ></el-progress>
                  </li>
                </template>
              </ul>
              <div class="content" style="margin-top:20%">
                <div class="content_wrap">
                  <span>
                    <div class="blueIcon"></div>
                    <span class="title">AiBox</span>
                  </span>
                  <span>电线松动或者电压不稳定(56%)</span>
                </div>
                <div class="content_wrap">
                  <span>
                    <div class="pupleIcon"></div>
                    <span class="title">无法存储</span>
                  </span>
                  <span>电线松动或者电压不稳定(28%)</span>
                </div>
                <div class="content_wrap">
                  <span>
                    <div class="greenIcon"></div>
                    <span class="title">没有声音</span>
                  </span>
                  <span>电线松动或者电压不稳定(16%)</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" shadow="hover">
            <div slot="header" class="clearfix">
              <span>异常类型</span>
            </div>
            <div class="text item">
              <Pie v-bind:id="'statusPie'" v-bind:data="statusOption"></Pie>
              <div class="content">
                <div class="content_wrap">
                  <span>
                    <div class="blueIcon"></div>
                    <span class="title">AiBox</span>
                  </span>
                  <span>电线松动或者电压不稳定(56%)</span>
                </div>
                <div class="content_wrap">
                  <span>
                    <div class="pupleIcon"></div>
                    <span class="title">无法存储</span>
                  </span>
                  <span>电线松动或者电压不稳定(28%)</span>
                </div>
                <div class="content_wrap">
                  <span>
                    <div class="greenIcon"></div>
                    <span class="title">没有声音</span>
                  </span>
                  <span>电线松动或者电压不稳定(16%)</span>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-col>
      <el-col :span="8" class="rightPart">
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <span>总排行</span>
            <el-col :span="16" class="rightTop">
              <el-form class="selChoose" size="mini">
                <el-form-item v-show="true">
                  <el-select v-model="deviceType" size="mini">
                    <el-option
                      v-for="item in setTypeData"
                      v-bind:key="item.name"
                      v-bind:label="item.name"
                      v-bind:value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item v-show="false">
                  <el-date-picker size="mini" v-model="value1" type="date" placeholder="选择日期"></el-date-picker>
                </el-form-item>
              </el-form>
            </el-col>
          </div>
          <div class="text item">
            <ul>
              <template v-for="(item,index) in deviceData">
                <li v-bind:key="index">
                  <span class="title">{{index+1}}</span>
                  <span class="clientName">{{item.clientName}}</span>
                  <span class="clientName">{{item.type}}</span>
                </li>
              </template>
            </ul>
          </div>
        </el-card>
      </el-col>
    </section>
  </div>
</template>

<script type="text/javascript" src="../../api/dashboardmg/mydata.js"></script>

<style lang="scss">
.MyData {
  flex: 1;
  padding: 16px;
  > section {
    display: flex;
    .box-card {
      background-color: #1f2548;
      border: 1px solid #1f2548;
      flex: 1;
      margin: 0 8px;
      display: flex;
      flex-direction: column;
    }
    &.part1_wrap {
      justify-content: space-between;
      padding: 0 20px;
      margin-bottom: 20px;
      .el-card__header {
        border-bottom: 1px solid #4b506c;
        .clearfix {
          display: flex;
          justify-content: space-between;
          flex: 1;
          padding: 6px 10px;
          .leftTop {
            .selChoose {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: flex-end;
              .el-form-item {
                margin: 0 10px;
                .el-date-editor {
                  background-color: #85899c;
                  color: #fff;
                  border: 1px solid #85899c;
                }
                .el-range-input {
                  background-color: #85899c;
                  color: #fff;
                  border: 1px solid #85899c;
                }
              }
            }
          }
          .rightTop {
            .selChoose {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: flex-end;
              .el-form-item {
                margin: 0 10px;
                .el-input--mini {
                  width: 125px;
                  .el-input__inner {
                    background-color: #85899c;
                    color: #fff;
                    border: 1px solid #85899c;
                  }
                }
              }
            }
          }
          span {
            font-size: 16px;
            font-weight: 500;
            line-height: 25px;
            color: #fff;
          }
          .selChoose {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            .el-form-item {
              margin: 0 10px;
            }
          }
        }
      }
      .el-card__body {
        .text {
          height: 100%;
          height: 35vh;
          flex-direction: column;
          ul {
            li {
              color: #85899c;
              margin-bottom: 5px;
              .el-progress-bar {
                padding-right: 0px;
                margin-right: 0px;
              }
              .el-progress__text {
                color: #85899c;
                margin-left: 50px;
                margin-top: -61px;
              }
            }
          }
        }
      }
    }
    &.part2_wrap {
      justify-content: space-between;
      padding: 0 20px;
      margin-bottom: 20px;
      .el-card__header {
        border-bottom: 1px solid #4b506c;
        .clearfix {
          display: flex;
          justify-content: space-between;
          flex: 1;
          padding: 6px 10px;
          .leftTop {
            .selChoose {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: flex-end;
              .el-form-item {
                margin: 0 10px;
                .el-date-editor {
                  background-color: #85899c;
                  color: #fff;
                  border: 1px solid #85899c;
                }
                .el-range-input {
                  background-color: #85899c;
                  color: #fff;
                  border: 1px solid #85899c;
                }
              }
            }
          }
          .rightTop {
            .selChoose {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: flex-end;
              .el-form-item {
                margin: 0 10px;
                .el-input--mini {
                  width: 125px;
                  .el-input__inner {
                    background-color: #85899c;
                    color: #fff;
                    border: 1px solid #85899c;
                  }
                }
              }
            }
          }
          span {
            font-size: 16px;
            font-weight: 500;
            line-height: 25px;
            color: #fff;
          }
          .selChoose {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
            .el-form-item {
              margin: 0 10px;
            }
          }
        }
      }
      .el-card__body {
        .text {
          height: 100%;
          height: 35vh;
          flex-direction: column;
          ul {
            li {
              color: #85899c;
              margin-bottom: 20px;
              display: flex;
              justify-content: space-around;
              .el-progress {
                width: 100%;
                .el-progress-bar__outer {
                  height: 14px !important;
                }
              }
            }
          }
          .content {
            display: flex;
            flex-direction: column;
            .content_wrap {
              margin-bottom: 10px;
              span {
                color: #85899c;
                display: flex;
                margin-bottom: 4px;
                font-size: 5px;
                .blueIcon {
                  border: 7px solid #026cd2;
                  width: 15px;
                  height: 14px;
                  border-radius: 10px;
                }
                .pupleIcon {
                  border: 7px solid #9a59b5;
                  width: 15px;
                  height: 14px;
                  border-radius: 10px;
                }
                .greenIcon {
                  border: 7px solid #01caff;
                  width: 15px;
                  height: 14px;
                  border-radius: 10px;
                }
                .title {
                  margin-left: 4%;
                  font-size: 5px;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
